<template>
  <div class="shopdetails">
    <el-image
      style="width: 100%; height: 250px"
      :src="require('../assets/2.png')"
      fit="cover"
    ></el-image>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">订单详情</a></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="felx">
      <el-image
        style="width: 300px; height: 300px; flex-shrink: 0"
        :src="list.url"
        fit="cover"
      ></el-image>
      <div class="felx_right">
        <div class="felx_right_title">{{ list.name }}</div>
        <div class="">
          <div class="num">
            <div class="">数量</div>
            <el-input-number
              v-model="num"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
            >
            </el-input-number>
          </div>
          <div class="mat30">
            可配送台湾|当日发货|一年质保|退换货运费险全国联保|24H发货|在线支付免运费
          </div>
          <el-button type="danger" class="mat30" @click="buy"
            >立即购买</el-button
          >
        </div>
      </div>
    </div>

    <el-divider></el-divider>
    <el-dialog
      title="支付密码"
      :visible.sync="dialogFormVisible"
      v-if="dialogFormVisible"
    >
      <el-form>
        <el-form-item label="支付密码" label-width="120px">
          <el-input v-model="name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogclose">取 消</el-button>
        <el-button type="primary" @click="dialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: "",
      num: 1,
      userID: "",
      dialogFormVisible: false,
      name: "",
      id: "",
    };
  },
  created() {
    this.sale();
  },
  methods: {
    buy() {
      if (
        sessionStorage.getItem("bfid") == "" ||
        sessionStorage.getItem("bfid") == null
      ) {
        this.$message.error("请先登录");
      } else {
        this.add();
      }
    },
    add() {
      this.$http
        .postRequest("main/order/add", {
          userId: sessionStorage.getItem("bfid"),
          saleId: this.$route.query.id,
          num: this.num,
        })
        .then((res) => {
          if (res.code === 0) {
            this.id = res.data.id;
            this.dialogFormVisible = true;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    dialogclose() {
      this.name = "";
      this.dialogFormVisible = false;
    },
    dialog() {
      this.$http
        .postRequest("main/order/pay", {
          userId: sessionStorage.getItem("bfid"),
          id: this.id,
          payPass: this.name,
        })
        .then((res) => {
          if (res.code === 0) {
            this.$message.success("支付成功");
            this.name = "";
            this.dialogFormVisible = false;
            setTimeout(() => {
              this.$router.go(-1);
            }, 500);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    sale() {
      this.$http
        .postRequest("main/sale/show", {
          id: this.$route.query.id,
        })
        .then((res) => {
          console.log(res.data);
          if (res.code === 0) {
            this.list = res.data;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleChange(value) {
      console.log(value);
    },
  },
  // html加载完成后执行。
  mounted() {},
};
</script>

<style>
.shopdetails {
  width: 80%;
  margin: auto;
  min-height: 600px;
}

.felx {
  display: flex;
  margin-top: 30px;
}

.felx_right {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 50px;
}

.felx_right_title {
  line-height: 1.8;
  font-size: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.num {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mat30 {
  margin-top: 30px;
}
</style>
